<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: OBKoro1
 * @LastEditTime: 2022-12-08 11:51:38
-->
<template>
  <el-card class="box-card" style="height: 100%">
    <div v-if="waterSite.key.length != 0" style="height: 95%">
      <div style="height: 49%; padding: 10px" v-if="waterSite.stcd">
        <SchemePreset />
      </div>
      <el-divider style="margin: 5px 0px" />
      <div style="height: 49%; padding: 10px">
        <BoundaryEcharts
          :treeData="boundaryConditionTreeData.treeData"
          :treeSelectStcd="[waterSite.key]"
          :elementId="'dispatchingScheme-bottom-echarts'"
          :dataType="'sw'"
        />
      </div>
    </div>
    <div id="modelInfo">
      <!-- <span class="colorMolel zbColor"></span>
      <span class="dataInfo">整编数据</span>
      <span class="colorMolel bxColor"></span>
      <span class="dataInfo">报汛数据</span>
      <span class="colorMolel tsColor"></span>
      <span class="dataInfo">推算数据</span>
      <span class="colorMolel ybColor"></span>
      <span class="dataInfo">预报数据</span> -->
      <!-- <span class="colorMolel zdyColor"></span>
        <span class="dataInfo">自定义数据</span> -->
    </div>
  </el-card>
</template>

<script lang="ts">
import {
  ref,
  reactive,
  defineComponent,
  onMounted,
  inject,
  watch,
  getCurrentInstance,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

import BoundaryEcharts from "./boundaryEcharts.vue";
import SchemePreset from "./schemePreset.vue";

export default defineComponent({
  components: {
    BoundaryEcharts,
    SchemePreset,
  },
  setup: () => {
    const route = useRoute();

    const { proxy }: any = getCurrentInstance();

    const state = reactive({
      // 水位站信息
      waterSite: {
        key: "",
        stcd: "",
        title: "",
        type: "",
      },
    });

    // 坝前水位数据
    let schemePresetData: any = inject("schemePresetData");

    // 边界条件数据
    let boundaryConditionData: any = inject("boundaryConditionData");

    // 边界条件站点树状图数据
    let boundaryConditionTreeData: any = inject("boundaryConditionTreeData");

    // 方案参数信息
    const planDataMsgForm: any = inject("planDataMsgForm");

    watch(
      () => schemePresetData,
      (value: any, prevCount) => {
        state.waterSite = boundaryConditionTreeData.treeData.find(
          (item) => item.type === "ZS"
        );

        console.log(boundaryConditionTreeData.treeData);
        console.log(state.waterSite);

        // if (Object.keys(value).length != 0) {
        //   echartInit(
        //     boundaryConditionData[props.treeSelectStcd[0]][props.dataType],
        //     "",
        //     props.dataType
        //   );
        // }
      },
      { deep: true }
    );

    onMounted(() => {});

    return {
      ...toRefs(state),

      boundaryConditionTreeData,
    };
  },
});
</script>

<style scoped lang="less"></style>
